<template>
  <div v-loading="loading" class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="文档编码" prop="code">
          <CodeRuleInput :band-value.sync="formData.code" table-name="engineering_document" column-name="code" :is-edit="id" />
        </el-form-item>
        <el-form-item label="文档类型" prop="documentTypeCode">
          <DictSelect
            :band-value.sync="formData.documentTypeCode"
            dict-type="documentTypeCode"
          />
        </el-form-item>

        <el-form-item label="物料编码" class="clickChoose" prop="materialCode">
          <el-input v-model="formData.materialCode" placeholder="请选择" readonly />
          <a
            class="clickChoose_button"
            @click.prevent="chooseMaterial"
          >
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="formData.materialName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="formData.materialModel" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="物料分类">
          <el-input v-model="formData.materialTypeName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item v-if="isShow" label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div class="formItem_header">
        文档信息
        <div class="formItem_header_operate">
          <a class="formItem_header_operate_item" @click="addRow">
            <svg-icon icon-class="新增" />
            <div class="item_name">添加</div>
          </a>
          <a class="formItem_header_operate_item delete" @click="deleteRow">
            <svg-icon icon-class="删除" />
            <div class="item_name">删除</div>
          </a>
        </div>
      </div>
      <div ref="table_container" class="table_container">
        <el-table
          ref="table"
          :data="tableData"
          :height="tableHeight"
          stripe
          border
          style="width: 99.9%"
          :header-cell-class-name="headerCellClassName"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="selection"
            width="70"
            align="center"
          />
          <el-table-column label="图号" min-width="100" prop="pictureCode">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.pictureCode"
                clearable
              />
            </template>
          </el-table-column>
          <el-table-column label="文件" min-width="100" prop="fileRealName">
            <template slot-scope="scope">
              <FileManage
                :file-names.sync="scope.row.fileName"
                :file-real-names.sync="scope.row.fileRealName"
                :file-urls.sync="scope.row.fileUrl"
                :row-index="scope.$index"
                @fileName="setFileName"
              />
            </template>
          </el-table-column>

          <el-table-column label="描述" min-width="100">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                clearable
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo } from '@/api/engineeringManage/documentManage'
import chooseMaterial from './chooseMaterial'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      loading: true,
      isShow: false,
      formData: {
        id: undefined,
        code: undefined,
        documentTypeCode: '',
        materialId: undefined,
        materialCode: undefined,
        materialName: undefined,
        materialModel: undefined,
        materialTypeName: undefined,
        remark: undefined,
        status: '1'
      },
      tableData: [],
      tableHeight: 265,
      rules: {
        materialCode: [
          { required: true, message: '物料不能为空', trigger: 'change' }
        ],
        documentTypeCode: [
          { required: true, message: '文档类型不能为空', trigger: 'change' }
        ],
        code: [
          { required: true, message: '文档编码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    if (!this.id) { // 没有id就是新增
      this.loading = false
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  methods: {
    headerCellClassName(data) {
      if (['pictureCode', 'fileRealName'].indexOf(data.column.property) != -1) {
        return 'column_bt'
      }
    },
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.tableData = res.data.data
        this.isShow = true
        this.loading = false
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let tag = true
          if (tag && this.tableData.length == 0) {
            this.$message({
              message: '文档信息不能为空',
              type: 'warning'
            })
            tag = false
          }

          if (tag && this.tableData.length > 0) {
            this.tableData.forEach(item => {
              if (tag && !item.pictureCode) {
                this.$message({
                  message: '请填写图号',
                  type: 'warning'
                })
                tag = false
              }
              if (tag && !item.fileName) {
                this.$message({
                  message: '请上传文件',
                  type: 'warning'
                })
                tag = false
              }
            })
          }
          if (tag) {
            this.formData.data = this.$deepClone(this.tableData)
            addOrUpdate(this.formData).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$layer.close(this.layerid) // 关闭弹框
              this.$parent.refresh() // 调用父组件的刷新方法
            })
          }
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },

    chooseMaterial() {
      this.$layer.iframe({
        // 弹框
        content: {
          content: chooseMaterial, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            id: this.formData.materialId ? this.formData.materialId : ''
          } // props
        },
        area: ['880px', '700px'],
        title: '选择物料', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    chooseMaterialCallBack(row) {
      this.formData.materialId = row.id
      this.formData.materialCode = row.materialCode
      this.formData.materialName = row.materialName
      this.formData.materialModel = row.materialModel
      this.formData.materialTypeName = row.materialTypeName
    },
    setFileName(...data) {
      this.tableData[data[3]].fileName = data[0]
      this.tableData[data[3]].fileRealName = data[1]
      this.tableData[data[3]].fileUrl = data[2]
    },
    addRow() {
      const obj = {
        pictureCode: '',
        fileName: '',
        fileRealName: '',
        fileUrl: '',
        remark: ''
      }
      this.tableData.push(obj)
    },
    selectionChange(row) {
      this.selectionsAll = row
    },
    deleteRow() {
      this.selectionsAll.forEach(item => {
        this.tableData.splice(this.tableData.indexOf(item), 1)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table_container {
  padding-bottom: 20px !important;
}
</style>
